<template>
  <f7-page>
    <f7-navbar title="我的线路">
      <f7-nav-right>
        <f7-link href="/pass/passAdd/" icon-f7="add" color="white" id="add"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar>
      <tab isActive1="true"/>
    </f7-toolbar>

    <f7-list contacts>
      <f7-list-group class="btn">
        <f7-list-item :title="startAddsStr" @click="delogAdd('start')" class="btns"></f7-list-item>
        <f7-list-item :title="endAddsStr" @click="delogAdd('end')" class="btns"></f7-list-item>
        <f7-list-item @click="startAdds=null,endAdds=null,startAddsStr='选择出发地',endAddsStr='选择到达地'" class="btns2">重置
        </f7-list-item>
      </f7-list-group>
      <addSelect ref="addSelect" @addsDone="addsDoneEmit"></addSelect>
    </f7-list>
    <f7-link v-for="(item,index) in lines" :key="index" @click="$f7router.navigate('/lines/details/'+item._id)">
      <f7-card>
        <f7-card-header>
          <div class="col text-left">
            <img src='../../assets/img/line-icon.png' class="line-icon">
            <div class="col pull-left">{{item.start_province}}</div>
          </div>

          <div class="col text-center">
            <h5 class="text-orange" v-if="item.money">去：￥{{item.money}}元/吨</h5>
            <h5 class="text-orange" v-if="!item.money">以货源方出价为准</h5>
            <h5 class="status-bg text-orange" v-if="item.unmoney">回：￥{{item.unmoney}}元/吨</h5>
            <h5 class="status-bg text-orange" v-if="!item.unmoney">以货源方出价为准</h5>
          </div>

          <div class="col text-right">
            {{item.end_province}}
          </div>

        </f7-card-header>
        <f7-card-footer>
          运输货物：
          <template v-if="item.cargo_chn[0]">{{item.cargo_chn.toString()}}</template>
          <template v-if="!item.cargo_chn[0]">不限制</template>
        </f7-card-footer>
      </f7-card>
    </f7-link>

    <!--<f7-list>-->
    <!--<f7-list-item v-for="item in lines"  >-->
    <!--线路号：{{item._id}}<br>-->
    <!--发线人：{{item.user_name}}<br>-->
    <!--起始地：{{item.start_province}}&ndash;&gt;{{item.end_province}}<br>-->
    <!--运输啥：{{item.company_transport.toString()}}-->
    <!--</f7-list-item>-->
    <!--</f7-list>-->
  </f7-page>
</template>

<script>
  import tab from '../../components/tab.vue'
  import addSelect from '../../components/addSelect.vue'
  import F7Input from '../../../node_modules/framework7-vue/src/components/input'
  import F7Link from '../../../node_modules/framework7-vue/src/components/link'

  import details from './details.vue'

  export default {
    name: 'lines',
    components: {
      F7Link,
      F7Input,
      tab,
      addSelect,
      details
    },
    data () {
      return {
        lines: '',

        startAdds: null,
        startAddsStr: '选择出发地',
        endAdds: null,
        endAddsStr: '选择到达地'
      }
    },
    methods: {
      async passListDemand() {
          let param
          if (this.startAdds == null && this.endAdds == null) {
            param = {page: 1, getType: 1, scene: 'self', is_refresh: true}
          } else if (this.startAdds != null && this.endAdds == null) {
            param = {page: 1, getType: 1, scene: 'self', is_refresh: true, start_province: this.startAdds.start_province}
          } else if (this.startAdds == null && this.endAdds != null) {
            param = {page: 1, getType: 1, scene: 'self', is_refresh: true, end_province: this.endAdds.end_province}
          } else if (this.startAdds != null && this.endAdds != null) {
            param = {
              page: 1,
              getType: 1,
              scene: 'self',
              is_refresh: true,
              start_province: this.startAdds.start_province,
              end_province: this.endAdds.end_province
            }
    }

    let linesRep = (await
    this.LineService.passListDemand(param)
  ).
    data
    this.lines = linesRep.data.lines
  }
  ,

  // 选择城市页
  delogAdd(type)
  {
    this.addType = type
    this.$refs.addSelect.openPop()
  }
  ,

  // 点击城市
  addsDoneEmit(data)
  {
    let addsStr = `${data.province[0]} ${data.city} ${data.district}`
    if (this.addType === 'start') {
      this.startAddsStr = addsStr
      this.startAdds = {
        start_district: data.district,
        start_city: data.city,
        start_province: data.province
      }
    } else {
      this.endAddsStr = addsStr
      this.endAdds = {
        end_province: data.province,
        end_city: data.city,
        end_district: data.district
      }
    }
  }
  ,

  // 城市变化
  search()
  {
    this.passListDemand()
  }
  },

  mounted()
  {
    this.passListDemand()
  }
  ,
  watch: {
    startAdds()
    {
      this.search()
    }
  ,
    endAdds()
    {
      this.search()
    }
  }
  }

</script>

<style scoped>
  .ios a {
    color: #333;
    display: inline-block;
    width: 100%;
  }

  .ios .card-footer {
    color: #6d6d72;
    font-size: 12px;
  }

  .line-icon {
    width: 16px;
    height: 45px;
    margin-right: 8px;
    margin-top: 5px;
    float: left;
  }

  .status-bg {
    background: url('../../assets/img/route-bg.png') no-repeat top center;
    background-size: 95px 4px;
    margin-top: 20px;
    padding-top: 10px;
  }

  .text-orange {
    height: 0px;
    color: #ff6c00;
    font-weight: normal !important;
    font-size: 13px;
  }

  .pull-left {
    float: left;
    margin-top: 16px;
  }

  .ios .card-footer {
    min-height: 30px;
    padding: 0px 15px;
  }

  .ios .navbar a.icon-only {
    width: 20px;
  }

  .btn {
    margin: -20px 10px;
  }

  .btns {
    display: inline-block;
    width: 41%;
    border-left: 1px solid silver;
  }

  .btns2 {
    float: right;
    font-size: 12px;
    color: #a3a2f0;
  }
</style>
